<template>
	<view class="card">
		<uni-card class="uni-card" v-for="(item,index) in cardistlist" :key="index" margin="5px" :index="item.index"
			:title="item.title" :sub-title="item.subtitle" :thumbnail="item.thumbnail" :style="thumbnailStyle"
			order-radius="10rpx" @click="onClick">
			<text class="card-text">{{item.text}}</text>
			<button size="mini" type="warn" class="buy">购买</button>			
		</uni-card>
	</view>
</template>

<script>
	export default {
		name: "cardlist",
		data() {
			return {
				thumbnailStyle:{
					width: '80px',
					height: '80px'
				},
				cardistlist: [{
						"index": 0,
						"title": "小炒肉",
						"subtitle": "￥39",
						"thumbnail": '/static/集日坊麻辣香锅.jpg',
						"scr": "",
						"text": "好吃不腻"
					},
					{
						"index": 1,
						"title": "锅包肉",
						"subtitle": "6元/人",
						"thumbnail": '/static/集日坊麻辣香锅.jpg',
						"img": "",
						"scr": "",
						"text": "酸甜可口"
					},
					{
						"index": 2,
						"title": "溜肉段",
						"subtitle": "",
						"thumbnail": '/static/集日坊麻辣香锅.jpg',
						"img": "",
						"scr": "",
						"text": "鲜华酥脆"
					},
					{
						"index": 3,
						"title": "餐厅",
						"subtitle": "副标题",
						"thumbnail": '/static/集日坊麻辣香锅.jpg',
						"img": "",
						"scr": "",
						"text": "餐厅简介"
					}
				]

			};
		},
		methods: {
			onClick(e) {
				console.log(e)
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-text {
		font-family: "楷体";
		color: black;
		font-size: 20px;
	}
	.card  {}
	.describe{
		display: flex
	}
	.buy{
		line-height: 36rpx;
		margin-left: 520rpx;
	}
	uni-card.thumbnail-img {
	    width: 90px;
	    height: 80px;
	    border-radius: 40px; /* 如果想设置为圆形，半径取宽高一半 */
	}
</style>